<template>
  <div class="goods_info_temp">
    <div class="mbx w1200">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/home/goods/category/${goods?.category1Id}` }">
          {{ goods?.category1Name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/home/goods/category/${goods?.category2Id}` }">
          {{ goods?.category2Name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/home/goods/category/${goods?.category3Id}` }">
          {{ goods?.category3Name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ goods?.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="goods_info_top w1200">
      <!-- 放大图-->
      <!--          <ImageView :image-list="goodsDetail.imageUrl" />-->
      <ImgView :image-list="goods?.imageUrl" />
      <div class="goods_info_top_right">
        <div class="goods_info_title">
          {{ goods?.name }}{{ skus?.name }}
          <p>{{ goods?.subName }}</p>
          <div class="goods_info_sc">
            收藏
            <el-icon>
              <Star />
            </el-icon>
          </div>
        </div>
        <div class="goods_info_group">
          <template v-if="false">
            <div class="goods_info_price"><span>秒杀价：</span>25</div>
            <div class="goods_info_market_price">
              <span>市场价：</span>
              <div class="overx_goods_info">38</div>
            </div>
          </template>
          <template v-else>
            <div class="goods_info_price"><span>商城价：</span>￥{{ goods?.price }}</div>
            <div class="goods_info_market_price">
              <span>市场价：</span>
              <div class="overx_goods_info">￥{{ goods?.oldPrice }}</div>
            </div>
          </template>

          <!-- <div class="goods_info_active"><span>优惠：</span><font class="noy" v-if="goods_info.goods_freight<=0 && goods_info.freight_id<=0">包邮</font><font v-else-if="store_info.free_freight>0">满{{store_info.free_freight}}包邮</font><font class="noz" v-else>暂无优惠</font></div> -->
          <div class="goods_info_sale_num">
            累计销量<em color="#ca151e">{{ goods?.sale }}</em>
          </div>
          <div class="goods_info_phone_read">手机查看<i style="font-size: 16px" class="fa fa-qrcode"></i></div>

          <!-- 优惠券 S -->
          <div class="coupons_block" v-if="false">
            <ul>
              <li v-for="(v, k) in 4" :key="k">
                <div class="price">59</div>
                <div class="block">
                  <div>优 惠 券</div>
                  <div>满500可用</div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 优惠券 E -->
        </div>
        <!-- 参加活动 -->
        <div class="goods_info_active">
          <div class="goods_skill" v-if="false">
            <span>
              <!--                          <el-icon style="margin:0 10px"><Timer /></el-icon>-->
              参加秒杀活动</span
            >
            <span class="span_time">距离结束 0 天 00 时 00 分 00 秒</span>
          </div>
          <div class="goods_skill tuan_active" v-if="false">
            <span>
              <!--                          <el-icon style="margin:0 10px"><UserFilled /></el-icon>-->
              参加团购活动 ( 点击开新团 )
            </span>
            <span class="span_time">团购价：38,需要 25人</span>
          </div>
          <div class="tuan_list" v-if="false">
            <el-carousel autoplay :direction="'vertical'" height="30px" indicator-position="none">
              <el-carousel-item v-for="(v, k) in 4" :key="k">
                <div class="tuan_item">
                  <img src="/src/assets/Home/user_default.png" />
                  <div class="nickname">昵称</div>
                  <div class="btn">参团</div>
                  <div class="orders_count">已经参团 58 人</div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>

        <!-- 满减 S -->
        <div class="goods_info_full_reduction" v-if="false">
          <span class="title">活动：</span>
          <span class="act" v-for="(v, k) in 4" :key="k"> 满500减10元；</span>
        </div>
        <!-- 满减 E -->
        <!--sku组件-->
        <SkuView :goods="goods" @change="skuChange" />

        <!--        <div class="goods_info_spec" v-show="true">-->
        <!--          <div class="spec_list" v-for="(v,k) in 4" :key="k">-->
        <!--            <span>价格：</span>-->
        <!--            <ul>-->
        <!--              <li class="red" v-for="(val,key) in 4" :key="key">选择</li>-->
        <!--            </ul>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--sku组件-->

        <div class="goods_info_num">
          <div class="goods_info_num_title">购买数量：</div>
          <div class="goods_info_num_input">
            <el-input-number :min="0" v-model="count" @change="countChange" />
          </div>
          <div class="goods_info_num_stock">&nbsp;559库存</div>
          <div class="clear"></div>
        </div>
        <div class="goods_info_btn">
          <!-- <div v-show="goods_info.is_groupbuy==1" class="goods_info_add_groupbuy" @click="group_buy()"><i class="icon iconfont">&#xe601;</i>选择团购</div> -->
          <template v-if="false">
            <div class="goods_info_buy"><img :src="'/src/assets/Home/buy.png'" /> 立即抢购</div>
          </template>
          <template v-else>
            <el-button class="goods_info_buy" size="large"><img :src="'/src/assets/Home/buy.png'" /> 立即购买 </el-button>
            <el-button class="goods_info_add_cart" size="large" @click="addCart"><img :src="'/src/assets/Home/cart.png'" />加入购物车 </el-button>
          </template>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="goods_info_content w1200">
      <div class="left_item">
        <!--店铺信息-->
        <StoreInfo />
      </div>
      <div class="right_item">
        <el-tabs model-value="1">
          <el-tab-pane name="1" label="商品详情">
            <div v-html="goods?.goodsDetails.content" />
          </el-tab-pane>
          <el-tab-pane name="2" label="用户评价">
            <!-- 评论 -->
            <div class="comment_list_top">
              <div class="left_bfb">
                59<em style="font-size: 20px">%</em>
                <span>好评率</span>
              </div>
              <div class="right_comment_list">
                <ul>
                  <li class="red">全部 (55)</li>
                  <li class="red">好评 (55)</li>
                  <li class="red">中评 (55)</li>
                  <li class="red">差评 (55)</li>
                </ul>
              </div>
            </div>
            <div class="user_content_blcok_line"></div>
            <div class="comment_list_block">
              <ul>
                <li v-for="(v, k) in 10" :key="k">
                  <div class="comment_avatar">
                    <el-image src="/src/assets/Home/user_default.png"></el-image>
                  </div>
                  <div class="comment_nickname">昵称</div>
                  <div class="comment_star">
                    <em>评价得分：</em>
                    <div class="store_star_in">
                      <el-rate disabled score-template="3分" text-color="#F7BA2A" show-score></el-rate>
                    </div>
                  </div>
                  <div class="comment_content">评价内容：<em style="color: #999">内容还没写</em></div>
                  <div class="comment_images" v-if="true">
                    <div class="comment_image" v-for="(vo, key) in 5" :key="key">
                      <el-image class="el_image" :initial-index="key" />
                    </div>
                    <div class="clear"></div>
                  </div>
                  <div class="reply" v-if="true">
                    <div class="comment_avatar">
                      <el-image :src="'/src/assets/Home/kefu.png'"></el-image>
                    </div>
                    <div class="comment_nickname">售后客服</div>
                    <div class="comment_content">回复内容：<em>你好</em></div>
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane name="3" label="售后服务" force-render>
            <div></div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--            <div class="clear"></div>-->
    </div>

    <!-- 聊天 -->
    <!--        <chat ref="chat" :position="true" :params="data.chatParams" />-->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getGoodDetailApi } from '@/api/home/mallGoods';
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import StoreInfo from '@/views/goods/components/StoreInfo.vue';
import ImgView from '@/views/goods/components/ImgView.vue';
import { Star } from '@element-plus/icons-vue';
import SkuView from '@/components/Sku/index2.vue';
import type { GoodsSkusVO } from '@/api/home/goodsSkus/types';
import { useCartStore } from '@/store/modules/carts';
import { useUserStore } from '@/store';

const route = useRoute();
const goodsDetail = ref<any>({});
const goods = ref<any>();
const count = ref<number>(1);
const skus = ref<any>({});
const cartStore = useCartStore();
const userStore = useUserStore();
/*获取商品详情*/
const getGoodsDetail = async (id = route.params.id) => {
  const res: any = await getGoodDetailApi(id);
  console.log(res);
  goods.value = res.data;
};
/*选择sku*/
const skuChange = (sku: GoodsSkusVO) => {
  skus.value = sku;
};
/*加入购物车*/
const countChange = (e: number) => {
  count.value = e;
};
const addCart = () => {
  if (skus.value.id) {
    //操作
    cartStore.addCart({
      id: skus.value.id,
      userId: userStore.user.userId,
      goodsId: goods.value.id,
      skuId: skus.value.id,
      name: goods.value.name,
      skuName: skus.value.name,
      price: skus.value.price,
      count: count.value,
      selected: true
    });
    ElMessage.success('添加成功');
  } else {
    //操作
    cartStore.addCart({
      id: skus.value.id,
      userId: userStore.user.userId,
      goodsId: goods.value.id,
      skuId: skus.value.id,
      name: goods.value.name,
      skuName: skus.value.name,
      price: skus.value.price,
      count: count.value,
      selected: true
    });
  }
};

//监听路由变化
onBeforeRouteUpdate((to) => {
  getGoodsDetail(to.params.id);
});

onMounted(() => {
  getGoodsDetail();
});
</script>

<style lang="scss" scoped>
.goods_info_content {
  .right_item {
    border: 1px solid #efefef;
    padding: 20px;
    box-sizing: border-box;
    min-height: 600px;
    width: 946px;
    float: left;

    .user_content_blcok_line {
      clear: both;
      height: 1px;
      background: #efefef;
      margin: 15px 0;
    }

    .comment_list_top {
      margin-bottom: 15px;

      .left_bfb {
        float: left;
        font-size: 48px;
        color: #ca151e;
        line-height: 95px;
        width: 225px;
        text-align: center;
        position: relative;
        border-right: 1px solid #efefef;
        padding-right: 35px;

        span {
          font-size: 14px;
          color: #999;
          position: absolute;
          top: -16px;
          left: 150px;
        }
      }

      .right_comment_list {
        ul {
          display: flex;
        }

        ul li {
          cursor: pointer;
          flex: 1;
          line-height: 48px;
          margin-left: 35px;
          margin-top: 25px;
          color: #666;
          height: 48px;
          font-size: 14px;
          background: #efefef;
          border-radius: 3px;
          text-align: center;
        }

        ul li.red {
          background: #efefef;
          color: #ca151e;
        }

        ul li.red:hover {
          background: #e1e1e1;
          color: #ca151e;
        }

        ul li:hover {
          background: #e1e1e1;
          color: #666;
          -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
        }
      }
    }

    .comment_list_top:after {
      clear: both;
      display: block;
      content: '';
    }
  }

  .left_item {
    width: 234px;
    float: left;
    margin-right: 20px;
  }

  margin-top: 60px;
}

.goods_info_top_right {
  float: left;
  width: 690px;
  font-size: 14px;

  .goods_info_num {
    padding: 10px;
    margin-top: 10px;

    .goods_info_num_title {
      color: #666;
      float: left;
      line-height: 25px;
      margin-right: 15px;
    }

    .goods_info_num_jian,
    .goods_info_num_jia {
      cursor: pointer;
      border: 1px solid #efefef;
      width: 25px;
      height: 25px;
      line-height: 24px;
      text-align: center;
      float: left;
      margin-right: 10px;
      color: #666;

      &:hover {
        background: #333;
        color: #fff;
        border: 1px solid #333;
      }
    }

    .goods_info_num_stock {
      line-height: 25px;
      color: #999;
    }

    .goods_info_num_input {
      float: left;
    }

    .goods_info_num_input input {
      height: 27px;
      border: 1px solid #efefef;
      outline: none;
      width: 50px;
      margin-right: 10px;
      box-sizing: border-box;
      padding: 0 8px;
      color: #666;
    }
  }

  .goods_info_btn {
    clear: both;
    margin-top: 20px;
  }

  .goods_info_add_cart,
  .goods_info_buy {
    cursor: pointer;
    line-height: 40px;
    float: left;
    margin-right: 20px;
    background: #ff5c14;
    border-radius: 3px;
    color: #fff;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 20px;
      margin-right: 5px;
    }
  }

  .goods_info_buy {
    cursor: pointer;
    background: #ca151e;

    i {
      font-size: 16px;
    }
  }

  .goods_info_add_groupbuy {
    cursor: pointer;
    line-height: 40px;
    float: left;
    margin-right: 20px;
    background: #67c23a;
    border-radius: 3px;
    color: #fff;
    padding: 0 15px;

    i {
      margin-right: 6px;
    }
  }

  .goods_info_title {
    position: relative;
    font-size: 18px;
    margin-bottom: 15px;
    padding-right: 100px;

    p {
      color: #999;
      line-height: 35px;
      font-size: 14px;
    }
  }

  .goods_info_group {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    // padding-bottom: 90px;
    height: 170px;
    background: url('../../../assets/Home/summary-bg.jpg');
  }

  .goods_info_price {
    color: #ca151e;
    font-size: 28px;
    line-height: 28px;
    font-weight: bold;

    span {
      line-height: 28px;
      color: #999;
      font-size: 14px;
      font-weight: normal;
    }
  }

  .goods_info_market_price {
    margin-top: 10px;

    span {
      color: #999;
    }

    .overx_goods_info {
      text-decoration: line-through;
      display: inline-block;
    }
  }

  .goods_info_sale_num {
    position: absolute;
    font-size: 12px;
    right: 16px;
    color: #333;
    top: 30px;

    em {
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  .goods_info_phone_read {
    position: absolute;
    right: 24px;
    font-size: 12px;
    color: #999;
    top: 120px;

    i {
      margin-left: 10px;
      color: #666;
    }
  }

  .goods_info_active {
    margin-top: 20px;

    span {
      color: #999;
    }

    em {
      background: #ff6590;
      color: #fff;
      line-height: 34px;
      padding: 4px 8px;
      margin-right: 10px;
      border-radius: 3px;
    }

    em.noy {
      background: #67c23a;
    }

    em.noz {
      background: #999;
    }

    .goods_skill {
      margin-bottom: 10px;
      background: #fef0f0;
      border: 1px solid #fde2e2;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        color: #f56c6c;
        line-height: 40px;
        display: flex;
        align-items: center;
      }

      span.span_time {
        margin-right: 30px;
      }
    }

    .tuan_active {
      cursor: pointer;
      background: #f0f9eb;
      border: 1px solid #e1f3d8;

      span {
        color: #67c23a;
      }

      &:hover {
        background: #67c23a;

        span {
          color: #fff;
        }
      }
    }
  }
}

//.goods_info_top_left{
//    width: 402px;
//    border: 1px solid #efefef;
//    margin-right: 28px;
//    float: left;
//    box-sizing: border-box;
//    .goods_image_item{
//        width: 400px;
//        height: 400px;
//        display: block;
//        border-bottom: 1px solid #efefef;
//    }
//    .pic_zoom_list{
//        ul li{
//            float: left;
//            margin:10px 10px 10px 0;
//            border:1px solid #efefef;
//            img{
//                width: 60px;
//                height: 60px;
//            }
//        }
//        ul li:hover{
//            border-color:#ca151e;
//        }
//        ul li:last-child{
//            margin-right: 0;
//        }
//        ul li.border_color{
//            border-color:#ca151e;
//        }
//        .pic_zoom_list_left{
//            font-size: 24px;
//            float: left;
//            line-height: 80px;
//            color:#666;
//            margin-right: 10px;
//            margin-left: 10px;
//            :hover{
//                color:#ca151e;
//            }
//        }
//        .pic_zoom_list_right{
//            font-size: 24px;
//            float: right;
//            line-height: 80px;
//            color:#666;
//            margin-right: 10px;
//            margin-left: 10px;
//            :hover{
//                color:#ca151e;
//            }
//        }
//    }
//}
.goods_info_sc {
  background: #f6f6f6;
  border-radius: 6px;
  font-size: 14px;
  line-height: 25px;
  color: #666;
  position: absolute;
  top: 0;
  right: 8px;
  padding: 0 10px;
  cursor: pointer;

  i {
    margin-left: 6px;
    font-size: 12px;
  }
}

.goods_info_sc.red_color {
  color: #fff;
  background: #ca151e;
}

.goods_info_sc:hover {
  color: #fff;
  background: #ca151e;
}

//.goods_info_spec {
//  margin-top: 20px;
//  padding-left: 10px;
//  line-height: 20px;
//  color: #666;
//  position: relative;
//  z-index: 200;
//
//  .spec_list {
//    margin-bottom: 10px;
//
//    span {
//      float: left;
//      width: 84px;
//    }
//
//    ul {
//      float: left;
//
//      li {
//        cursor: pointer;
//        float: left;
//        color: #666;
//        border: 1px solid #e1e1e1;
//        border-radius: 2px;
//        font-size: 12px;
//        padding: 0 8px;
//        margin-right: 10px;
//      }
//
//      li.red {
//        border: 1px solid #ca151e;
//        color: #ca151e;
//      }
//
//      li:hover {
//        border: 1px solid #ca151e;
//        color: #ca151e;
//      }
//    }
//  }
//
//  :after {
//    content: '';
//    display: block;
//    clear: both;
//  }
//}

.coupons_block {
  margin-top: 20px;
  width: 550px;

  ul li {
    border: 1px dashed #999;
    display: inline-block;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;

    .price {
      font-size: 30px;
      font-weight: bold;
      float: left;
      margin-right: 10px;
      line-height: 30px;
    }

    .block {
      float: left;
      font-size: 12px;
      color: #b5621b;
      line-height: 14px;
    }

    &:after {
      clear: both;
      display: block;
      content: '';
    }

    &:nth-child(n + 4) {
      display: none;
    }
  }
}

.goods_info_full_reduction {
  background: #e6e6e6;
  line-height: 25px;
  font-size: 12px;

  .title {
    width: 84px;
    color: #b5621b;
    padding-left: 10px;
    // margin-right: 45px;
  }

  .act {
    color: #b5621b;
  }
}

.tuan_list {
  margin-bottom: 10px;
  height: 32px;

  .tuan_item {
    height: 30px;
    overflow: hidden;

    &:after {
      content: '';
      display: block;
      clear: both;
    }

    img {
      width: 30px;
      height: 30px;
      border: 1px solid #efefef;
      border-radius: 50%;
      float: left;
      margin-right: 15px;
    }

    .nickname {
      color: #b5621b;
      float: left;
      display: block;
      width: 180px;
      line-height: 32px;
    }

    .orders_count {
      color: #b5621b;
      float: right;
      display: block;
      line-height: 32px;
      margin-right: 15px;
    }

    .btn {
      cursor: pointer;
      display: block;
      background: #67c23a;
      color: #fff;
      border-radius: 3px;
      float: right;
      line-height: 32px;
      padding: 0 10px;
    }
  }
}

.goods_info_temp {
  .mbx {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.rate_class {
  font-size: 14px;
  // margin-top: 10px;
  &.other {
    // margin-top: 6px;
  }
}

.comment_list_block {
  ul li {
    padding-top: 20px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 30px;
  }

  ul li:after {
    clear: both;
    display: block;
    content: '';
  }

  .comment_avatar {
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 50%;
    background: #efefef;
    margin-right: 15px;
  }

  .comment_nickname {
    font-size: 14px;
    color: #666;
    font-weight: bold;
  }

  .comment_star {
    height: 30px;
    font-size: 14px;
    color: #666;
    line-height: 30px;

    em {
      float: left;
      margin-right: 10px;
    }

    .store_star_in {
      float: left;
      margin-top: 5px;
    }
  }

  .comment_content {
    margin-top: 10px;
    border-top: 1px dashed #efefef;
    padding-top: 10px;
    margin-left: 55px;
    font-size: 14px;
    color: #666;
  }

  .comment_images {
    margin-left: 55px;
    margin-top: 10px;

    .comment_image {
      height: 90px;
      width: 90px;
      border: 1px solid #efefef;
      margin-right: 20px;
      float: left;

      .el_image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .reply {
    margin-top: 10px;
    margin-left: 40px;

    .comment_nickname {
      color: #ca151e;
    }

    .comment_content {
      color: #ca151e;
    }

    .comment_content {
      color: #ca151e;
    }
  }
}
</style>
